<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主页面</title>
		<script src='../public/js/axios.js'></script>
		<script src='../public/js/vue.js'></script>
		<script src='../public/js/jquery3.5.1.min.js'></script>
		<link rel='stylesheet' href='../public/css/personal.css' type='text/css' />
		<link rel='stylesheet' href='../public/css/homePage.css' type='text/css' />
		<link rel='stylesheet' href='../public/css/showAndHide.css' type='text/css' />
		<link rel='stylesheet' href='../public/css/GroupChat.css' type='text/css'/>
	</head>
	<body>
		<div id='app' class='app'>
			<!-- 主页面 -->
			<div>
		    <header class='header'>
				<span v-text="show">消息</span>
				<span class='iconfont right_1'>&#xe611;</span>
				<span class='iconfont right_2'>&#xe601;</span>
			</header>	
			<div class='news'  v-show='xiaoxi'>
				<div class='word'>
					<ul>
						<a href='./GroupChat.html'>
				            <li class='li_1'>
				        	    <img class='headPortrait' src='../public/img/qunliao.png'>
				        	    <ul class='ul'>
				        		     <li class='name'>多人聊天室</li>
				        		     <li class='newss'>消息</li>
				        	    </ul>
				        	<div class='time'>当前时间</div>
							
				        </li>
						</a>
						<li class='li_1' v-for='intem in newLists'>
							<img class='headPortrait' src='../public/img/head%20portrait.png'>
							<ul class='ul'>
								<li class='name'>名字</li>
								<li class='newss'>消息</li>
							</ul>
							<div class='time'>当前时间</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="addressList" :class='{"allShow":txl}' v-show='txl'>
				<ul>
					<li><img src='../public/img/newF.png'></span>新的朋友</li>
					<li><img src='../public/img/qunliao.png'><span>群聊</span></li>
					
				</ul>
			</div>
			<div class='discover' :class='{"allShow":fa}' v-show='fa'>
				<ul>
					<li ontouchend='goMoments()'>
						<img src='../public/img/Circle%20of%20Friends%20.png'><span>朋友圈</span>
						<span>
							
						</span>
						<img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/search.png'><span>搜一搜</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/nearby.png'><span>附近</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/take.png'><span>看一看</span><img  class='right' src='../public/mg/you.png'>
					</li>
					<li>
						<img src='../public/img/play.png'><span>游戏</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/applet.png'><span>小程序</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/shop.png'><span>购物</span><img  class='right' src='../public/img/you.png'>
					</li>
				</ul>
			</div>
			<div class='my':class='{"allShow":mi}' v-show="mi">
				<ul>
					<li>
						<div>
							<img src='../public/img/head%20portrait.png' class='headsrc'>
						</div>
						<ul>
							<li><b class='nickname'>晴</b></li>
							<li>账号：<span class='accountNumber'>111</span><img src='../public/img/you.png' ontouchend='goPersonal()'></li>
							<li><span class='sapn'>+状态</span><span class='sapn'>•••</span></li>
						</ul>
					</li>
					<li><img src='../public/img/set.png'>设置<img src='../public/img/you.png' class='right' ontouchend='goQuit()'></li>
					<li class='li'><img src='../public/img/collect.png'>收藏<img src='../public/img/you.png' class='right'></li>
				    <li class='li'><img src='../public/img/cardBag.png'>卡包<img src='../public/img/you.png' class='right'></li>
					<li class='li'><img src='../public/img/face.png'>表情<img src='../public/img/you.png' class='right'></li>
			        <li class='li'><img src='../public/mg/pay.png'>支付<img src='../public/img/you.png' class='right'></li>
				</ul>
			</div>
			<footer class='footer'>
			   <ul>
				    <li v-on:touchend='xiaoxi_f'>
					   <p><span class='iconfont black' :class='{"green":xiaoxi}'>&#xe602;</span></p>
					   <span class='size' :class='{"green":xiaoxi}'>消息</span>
				    </li>
				    <li v-on:touchend='txl_f()'>
					    <p><span class='iconfont black' :class='{"green":txl}'>&#xe645;</span></p>
					    <span class='size' :class='{"green":txl}'>通讯录</span>
				    </li>
				    <li v-on:touchend='fa_f()'>
					    <p><span class='iconfont black' :class='{"green":fa}'>&#xe604;</span></p>
					    <span class='size' :class='{"green":fa}'>发现</span>
				    </li>
				    <li v-on:touchend='mi_f'>
					    <p><span class='iconfont black' :class='{"green":mi}'>&#xe709;</span></p>
						<span class='size' :class='{"green":mi}'>我</span>
					</li>
			   </ul>
			</footer>
			</div>
			<!-- 朋友圈 -->
			<div calss='Moments' id='Moments'>
				<header class=header>
					<img class='img' src='../public/img/zuo.png' ontouchend='Moments_One()'>
					<div class='showImg'>
						<img src='../public/img/liao.jpg' class='img_2'>
					</div>
					<div class='showPortrait'>
						<span class='left nickname'></span>
						<img class='img_3 headsrc' src='../public/img/head%20portrait.png'>	
					</div>
					<img class='publish' src='../public/img/publish.png' ontouchend='publish()'>
				</header>
				<ul class='ul'>
					<li class='li' v-for='item in momentsnewslist'>
						<img class=' img' :src=item.headsrc>
						<div class='div'>
							<ul>
								<li class='bottom blue'>{{item.name}}</li>
								<li class='bottom'>{{item.pinglun}}</li>
								<li class='bottom'>
								    <ul>
										<li v-for='src in item.img' class='imgli'><img :src='src'></li>
									</ul>
								</li>
								<li class='showtime bottom'><span class='time1'>{{item.time}}</span>
								     <div class='little'>••</div>
									 <div class='like'>
									 	<ul>
									 		<li class='likeli give'><img src='../public/img/love2.png'><span>点赞</span></li>
									 		<li class='likeli discuss'><img src='../public/img/comment.png'>评论</li>
									 	</ul>
									 </div>
								</li>
								<li class='bottom normal bgblue'>
  									<div class='left thumbupbutton' v-for='item_name in item.likelist'><img class='img_name' src='../public/img/love.png'><span>{{item_name}}</span></div>
								</li>
									
								<li class='bottom'>
									<ul>
										<!-- 评论内容 -->
										<li></li>
									</ul> 
								</li>
							</ul>
							
							
						</div>
					</li>
					
				</ul>
				<footer class="footer_f">
					<ul>
						<li ontouchend='compile_f()'>编辑</li>
						<li>拍摄</li>
						<li>从相册选择</li>
						<li>用秒剪制作视频</li>
						<li ontouchend='MomentsCancel()'>取消</li>
					</ul>
				</footer>
			</div>
			<!-- 发布消息的编辑页面 -->
			<div class='compile'>
				<ul>
					<li class=li>
						<img src='../public/img/zuo.png' class='left' ontouchend='returnMoments()'>
						<div class='divRight' ontouchend='compileNews()'>发表</div>
					</li>
					<li>
						<textarea></textarea>
						<img class='rem5'><input class='rem5' capture='camera' multiple="multiple" type='file' />
					</li>
				    <li class='li'>所在位置 <img class='img_2' src='../public/img/you.png'></li>
					<li class='li'>提醒谁看 <img class='img_2' src='../public/img/you.png'></li>
					<li class='li'>谁可以看 <img class='img_2' src='../public/img/you.png'></li>
				</ul>
			</div>
			<!-- 个人资料 -->
		    <div class='personal'>
				    <header class='header'>
					    <img class='left' src='../public/img/zuo.png' ontouchend='personal_One()'>
					    <span>个人信息</span>
				    </header>
				    <ul>
					    <li class='li_1' ontouchend='goUploadPhotoAsAvatar()'>
						    <span class='span_1'>头像</span>
						    <img  class='img headsrc' src='../public/img/head%20portrait.png'>
		             <img class='right img_2' src='../public/img/you.png'>
					    </li>
					    <li ontouchend='goChangename()'>
						    <span>昵称</span>
						    <span class='span_right nickname'></span>
							<img class='right' src='../public/img/you.png'>
						</li>
						<li>
							<span>拍一拍</span>
							<img  class='right' src='../public/img/you.png'>
						</li>
						<li ontouchend='goChangeuser()'>
							<span>账号</span>
							<img  class='right' src='../public/img/you.png'>
							<span class='span_right accountNumber'>111</span>
						</li>
						<li>
							<span>二维码名片</span>
							<img  class='right' src='../public/img/you.png'>
						</li>
						<li>
							<span>更多</span>
							<img class='right' src='../public/img/you.png'>
						</li>
						<li>
							<span>我的地址</span>
							<img class='right' src='../public/img/you.png'>
						</li>
						<li>
							<span>喵喵币</span>
							<img class='right' src='../public/img/you.png'>
						</li>
				   </ul>
				</div>  
				<!-- 修改上传头像 -->
                <div class='changename ' id='uploadPhotoAsAvatar'>
                    <header>
					   <img src='../public/img/zuo.png' ontouchend='uploadPhotoAsAvatar_p()'>
                  		<span>修改头像</span>
                 		<div class='submit'>保存</div>
                   	</header>
						<img class='bg'>
						<input type='file'>

                 
                    <p>好的头像可以让你的朋友更容易记住你</p>
                </div>
				<!-- 更改名称 -->
				 <div class='changename ' id='changename'>
					 <header>
						 <img src='../public/img/zuo.png' ontouchend='changename_p()'>
						 <span>更改名字</span>
						 <div>保存</div>
					 </header>
					 <input v-model='changenames'>
					 <p>好的名字可以让你的朋友更容易记住你</p>
				 </div>
				<!-- 更改账号 -->
				<div class='changename' id='changeuser'>
					<header>
						<img src='../public/img/zuo.png' ontouchend='changeuser_p()'>
						<span>更改账号</span>
						<div>保存</div>
					</header>
 				    <input v-model='changeuser' type='number'>
				    <p>好的名字可以让你的朋友更容易记住你</p>
				</div>
				<!-- 设置 -->
				<div class='quit'>
					<header class=header>
						<img class='img' src='../public/img/zuo.png' ontouchend='quit_One()'>
						<span>设置</span>
					</header>
					<ul>
						<li><span>账号安全</span><img src='../public/img/you.png'></li>
						<li><span>青少年模式</span><span>未开启</span><img src='../public/img/you.png'></li>
						<li><span>新消息提醒</span><img src='../public/img/you.png'></li>
						<li><span>勿扰模式</span><img src='../public/img/you.png'></li>
						<li><span>聊天</span><img src='../public/img/you.png'></li>
						<li><span>隐私</span><img src='../public/img/you.png'></li>
						<li><span>通用</span><img src='../public/img/you.png'></li>
						<li><span>帮助与反馈</span><img src='../public/img/you.png'></li>
						<li><span>插件</span><img src='../public/img/you.png'></li>
						<li><span>注销账号</span><img src='../public/img/you.png'></li>
						<li class='text_quit'><a @touchend='pushOut()'><span>退出登录</span></a></li>
					</ul>
				</div>
				
			
		</div>
	</body>
	
</html>
<!-- 加载完毕 -->
<script src='../public/js/homePage.js'></script>
